<template>
  <div id="element" ref="elementRef">
    <!-- 头像小圆框 -->
    <div class="avatar-container">
      <img :src="photoImg" alt="Avatar" class="avatar">
    </div>
    <div id="g-img" :style="cardStyle" ref="imgRef">
      <div class="text-overlay">{{name}}</div>
      <div class="contributions-text">提交次数：{{contributions}}</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  props: {
    photoImg:String,
    imageUrl: String,
    name: String,
    contributions: String,
    linkUrl: String // 新增的链接prop
  },
  computed:{
    cardStyle() {
      if(this.imageUrl!==null){
        return {
          '--bg-image': `url(${this.imageUrl})`
        };
      }
    }
  },
  setup(props) { // 接受props参数
    const multiple = 10;
    const elementRef = ref(null);
    const imgRef = ref(null);
    let initialTransform = '';

    const transformElement = (x, y) => {
      const element = elementRef.value;
      const img = imgRef.value;

      if (!element || !img) return;

      const box = element.getBoundingClientRect();
      const calcX = -(y - box.y - box.height / 2) / multiple;
      const calcY = (x - box.x - box.width / 2) / multiple;
      const percentage = parseInt((x - box.x) / box.width * 1000) / 10;

      element.style.transform = `rotateX(${calcX}deg) rotateY(${calcY}deg)`;
      img.style.setProperty('--per', `${percentage}%`);
    };

    const mouseMoveHandler = (e) => {
      window.requestAnimationFrame(() => {
        transformElement(e.clientX, e.clientY);
      });
    };

    const mouseEnterHandler = () => {
      initialTransform = elementRef.value.style.transform;
      document.body.style.cursor = 'pointer'; // 设置指针样式为点击样式
      document.body.addEventListener('mousemove', mouseMoveHandler);
    };

    const mouseLeaveHandler = () => {
      const element = elementRef.value;
      if (element) {
        element.style.transform = initialTransform;
      }
      document.body.style.cursor = ''; // 还原指针样式为默认
      document.body.removeEventListener('mousemove', mouseMoveHandler);
    };


    const clickHandler = () => {
      // 在这里跳转到指定网页
      if (props.linkUrl) { // 检查是否存在链接
        // window.location.href = props.linkUrl;
        window.open(props.linkUrl)
      }
    };

    onMounted(() => {
      const element = elementRef.value;
      if (element) {
        element.addEventListener('mouseenter', mouseEnterHandler);
        element.addEventListener('mouseleave', mouseLeaveHandler);
        element.addEventListener('click', clickHandler); // 添加点击事件监听器
      }
    });

    onUnmounted(() => {
      const element = elementRef.value;
      if (element) {
        element.removeEventListener('mouseenter', mouseEnterHandler);
        element.removeEventListener('mouseleave', mouseLeaveHandler);
        element.removeEventListener('click', clickHandler); // 移除点击事件监听器
      }
      document.body.removeEventListener('mousemove', mouseMoveHandler);
    });

    return {
      elementRef,
      imgRef
    };
  }
};
</script>

<style scoped>
.avatar-container {
  pointer-events: none;
  position: absolute;
  top: 55%; /* 调整位置 */
  left: 50%; /* 居中 */
  transform: translateX(-50%);
  width: 100px; /* 调整大小 */
  height: 100px;
  z-index: 1;
  border-radius: 50%; /* 设置为圆形 */
  overflow: hidden; /* 裁剪超出部分 */
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充 */
}


.text-overlay {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  pointer-events: none; /* Ensure the text does not interfere with mouse events */
  text-shadow: 0 0 10px rgb(0, 0, 0); /* 添加发光效果，可以根据需要调整阴影大小和颜色 */
}

.contributions-text {
  position: absolute;
  top: calc(85% + 30px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  pointer-events: none; /* Ensure the text does not interfere with mouse events */
  text-shadow: 0 0 10px rgb(0, 0, 0); /* 添加发光效果，可以根据需要调整阴影大小和颜色 */
}


body {
  width: 100vw;
  height: 100vh;
  display: flex;
  transform-style: preserve-3d;
  perspective: 500px;
  cursor: pointer;
  background: #000;
}

#element {
  margin: auto;
  width: 250px;
  height: 400px;
  background: #ffffff;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all .1s;
}

#g-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-image);
  border-radius: 10px;
  filter: brightness(1.2);
}

#g-img::after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
  mix-blend-mode: color-dodge;
}

#g-img::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(115deg,
  transparent 0%,
  #06e8ff var(--per),
  #ffab2e calc(var(--per) + 25%),
  #ff2212 calc(var(--per) + 50%),
  transparent 100%);
  mix-blend-mode: overlay;
}

#g-img:hover::after,
#g-img:hover::before {
  display: block;
}
</style>
